<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>未来之窗昭和仙君cyberwin_fairyalliance_webquery - 数据渲染与属性扩展</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #165DFF;
            border-bottom: 2px solid #165DFF;
            padding-bottom: 10px;
            margin-bottom: 30px;
        }
        h2 {
            color: #333;
            margin: 25px 0 15px;
            padding-left: 10px;
            border-left: 4px solid #165DFF;
        }
        h3 {
            color: #444;
            margin: 20px 0 10px;
        }
        p {
            margin-bottom: 15px;
            line-height: 1.8;
        }
        .function-info {
            background-color: #f0f7ff;
            border-radius: 6px;
            padding: 20px;
            margin: 20px 0;
        }
        .param-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0 25px;
        }
        .param-table th, .param-table td {
            border: 1px solid #ddd;
            padding: 12px 15px;
            text-align: left;
        }
        .param-table th {
            background-color: #f5f7fa;
            font-weight: bold;
            width: 20%;
        }
        pre {
            background-color: #f8f8f8;
            border-radius: 6px;
            padding: 15px;
            overflow-x: auto;
            border: 1px solid #eee;
            margin: 15px 0;
        }
        code {
            font-family: "Consolas", monospace;
            color: #d32f2f;
        }
        .example-box {
            border: 1px dashed #165DFF;
            border-radius: 6px;
            padding: 15px;
            margin: 15px 0;
        }
        .highlight {
            color: #165DFF;
            font-weight: bold;
        }
        .property-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        .property-item {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            border: 1px solid #eee;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>未来之窗昭和仙君cyberwin_fairyalliance_webquery</h1>
        
        <h2>通用数据渲染功能与属性扩展</h2>
        <p>本文档介绍$cq库中用于数据渲染到界面的功能，以及扩展的元素属性访问方法。</p>
        
        <section>
            <h3>1. 核心渲染函数</h3>
            <div class="function-info">
                <p><strong>函数名：</strong> $cq.未来之窗_人工智能_前端口_数据渲染到界面</p>
                <p><strong>作用：</strong> 将数据对象中的键值对批量渲染到页面元素中，根据元素类型自动选择合适的赋值方式</p>
                <p><strong>版本：</strong> 2022-8-29</p>
                <p><strong>定义文件：</strong> fn_cyberwin_common_data_rendering.js</p>
                
                <h4>函数语法</h4>
                <pre><code>$cq.未来之窗_人工智能_前端口_数据渲染到界面(obj, 前置参数)</code></pre>
                
                <h4>参数说明</h4>
                <table class="param-table">
                    <tr>
                        <th>参数名</th>
                        <th>类型</th>
                        <th>是否必需</th>
                        <th>说明</th>
                    </tr>
                    <tr>
                        <td>obj</td>
                        <td>Object</td>
                        <td>是</td>
                        <td>需要渲染到界面的数据对象，键值对形式</td>
                    </tr>
                    <tr>
                        <td>前置参数</td>
                        <td>String</td>
                        <td>否</td>
                        <td>元素类名的前缀，默认为"cl_handle_data_"，用于匹配页面元素的class属性</td>
                    </tr>
                </table>
                
                <h4>使用示例</h4>
                <pre><code>// 准备数据对象
var userData = {
    username: "张三",
    gender: "male",
    age: 30
};

// 调用数据渲染函数
$cq.未来之窗_人工智能_前端口_数据渲染到界面(userData);</code></pre>
            </div>
        </section>
        
        <section>
            <h3>2. 扩展属性访问器</h3>
            <p>为$cq库扩展了常用的元素属性访问器，用于快速获取元素的标准属性值。</p>
            
            <div class="property-list">
                <div class="property-item">
                    <h4>id</h4>
                    <p>获取匹配元素集合中第一个元素的id属性值</p>
                    <pre><code>// 语法
$cq(selector).id</code></pre>
                </div>
                
                <div class="property-item">
                    <h4>name</h4>
                    <p>获取匹配元素集合中第一个元素的name属性值</p>
                    <pre><code>// 语法
$cq(selector).name</code></pre>
                </div>
                
                <div class="property-item">
                    <h4>className</h4>
                    <p>获取匹配元素集合中第一个元素的class属性值</p>
                    <pre><code>// 语法
$cq(selector).className</code></pre>
                </div>
                
                <div class="property-item">
                    <h4>src</h4>
                    <p>获取匹配元素集合中第一个元素的src属性值（适用于img、script等）</p>
                    <pre><code>// 语法
$cq(selector).src</code></pre>
                </div>
                
                <div class="property-item">
                    <h4>href</h4>
                    <p>获取匹配元素集合中第一个元素的href属性值（适用于a等）</p>
                    <pre><code>// 语法
$cq(selector).href</code></pre>
                </div>
                
                <div class="property-item">
                    <h4>tagName</h4>
                    <p>获取匹配元素集合中第一个元素的标签名</p>
                    <pre><code>// 语法
$cq(selector).tagName</code></pre>
                </div>
                
                <div class="property-item">
                    <h4>tagNames</h4>
                    <p>获取所有匹配元素的标签名列表</p>
                    <pre><code>// 语法
$cq(selector).tagNames</code></pre>
                </div>
            </div>
            
            <h4>属性示例</h4>
            <div class="example-box">
                <h4>HTML结构</h4>
                <pre><code>&lt;img id="user-avatar" class="avatar" src="/images/avatar.jpg" /&gt;
&lt;a id="home-link" name="nav-link" href="/home"&gt;首页&lt;/a&gt;</code></pre>
                
                <h4>JavaScript代码</h4>
                <pre><code>// 获取图片元素属性
console.log($cq("#user-avatar").id);        // 输出: "user-avatar"
console.log($cq("#user-avatar").className); // 输出: "avatar"
console.log($cq("#user-avatar").src);       // 输出: "/images/avatar.jpg"
console.log($cq("#user-avatar").tagName);   // 输出: "IMG"

// 获取链接元素属性
console.log($cq("#home-link").name);        // 输出: "nav-link"
console.log($cq("#home-link").href);        // 输出: "/home"
console.log($cq("#home-link").tagName);     // 输出: "A"</code></pre>
            </div>
            
            <h4>实现代码</h4>
            <pre><code>// 获取id属性
Object.defineProperty(cyberwin_query.prototype, 'id', {
    get: function() {
        if (this.elements.length === 0) return '';
        return this.elements[0].id || '';
    }
});

// 获取name属性
Object.defineProperty(cyberwin_query.prototype, 'name', {
    get: function() {
        if (this.elements.length === 0) return '';
        return this.elements[0].name || '';
    }
});

// 获取class属性
Object.defineProperty(cyberwin_query.prototype, 'className', {
    get: function() {
        if (this.elements.length === 0) return '';
        return this.elements[0].className || '';
    }
});

// 获取src属性
Object.defineProperty(cyberwin_query.prototype, 'src', {
    get: function() {
        if (this.elements.length === 0) return '';
        return this.elements[0].src || '';
    }
});

// 获取href属性
Object.defineProperty(cyberwin_query.prototype, 'href', {
    get: function() {
        if (this.elements.length === 0) return '';
        return this.elements[0].href || '';
    }
});</code></pre>
        </section>
        
        <section>
            <h3>3. 通用属性操作方法：prop()</h3>
            <div class="function-info">
                <p><strong>方法名：</strong> prop</p>
                <p><strong>作用：</strong> 通用的属性/特性获取和设置方法，支持获取单个属性值或为多个元素设置属性值</p>
                
                <h4>方法语法</h4>
                <pre><code>// 获取属性值
$cq(selector).prop(name)

// 设置属性值
$cq(selector).prop(name, value)</code></pre>
                
                <h4>参数说明</h4>
                <table class="param-table">
                    <tr>
                        <th>参数名</th>
                        <th>类型</th>
                        <th>是否必需</th>
                        <th>说明</th>
                    </tr>
                    <tr>
                        <td>name</td>
                        <td>String</td>
                        <td>是</td>
                        <td>要获取或设置的属性名称</td>
                    </tr>
                    <tr>
                        <td>value</td>
                        <td>任意类型</td>
                        <td>否</td>
                        <td>要设置的属性值，省略时为获取属性操作</td>
                    </tr>
                </table>
                
                <h4>返回值</h4>
                <ul>
                    <li>获取属性时：返回第一个匹配元素的属性值，无匹配元素返回空字符串</li>
                    <li>设置属性时：返回当前$cq对象，支持链式调用</li>
                </ul>
            </div>
            
            <h4>使用示例</h4>
            <div class="example-box">
                <h4>HTML结构</h4>
                <pre><code>&lt;input type="checkbox" id="agree" name="terms" /&gt;
&lt;input type="text" class="form-control" /&gt;
&lt;input type="text" class="form-control" /&gt;</code></pre>
                
                <h4>JavaScript代码</h4>
                <pre><code>// 获取属性值
console.log($cq("#agree").prop("type"));    // 输出: "checkbox"
console.log($cq("#agree").prop("name"));    // 输出: "terms"
console.log($cq("#agree").prop("checked")); // 输出: false

// 设置属性值
// 为复选框设置checked属性
$cq("#agree").prop("checked", true);
// 为多个元素设置属性
$cq(".form-control")
  .prop("disabled", true)
  .prop("placeholder", "请输入内容"); // 支持链式调用

// 验证结果
console.log($cq("#agree").prop("checked"));      // 输出: true
console.log($cq(".form-control:first").prop("disabled")); // 输出: true</code></pre>
            </div>
            
            <h4>实现代码</h4>
            <pre><code>// 通用属性/特性获取设置方法
cyberwin_query.prototype.prop = function(name, value) {
    // 无匹配元素时返回空
    if (this.elements.length === 0) {
        return value === undefined ? '' : this;
    }
    
    // 仅获取属性值
    if (value === undefined) {
        return this.elements[0][name] !== undefined ? this.elements[0][name] : '';
    }
    
    // 设置属性值
    this.elements.forEach(el => {
        el[name] = value;
    });
    return this; // 支持链式调用
};</code></pre>
        </section>
        
        <section>
            <h3>4. 实际应用场景</h3>
            <p>结合属性访问器和prop()方法，可以实现更灵活的数据渲染和表单处理逻辑：</p>
            <pre><code>// 增强的数据渲染函数
$cq.未来之窗_人工智能_前端口_数据渲染到界面 = function(obj, prefix) {
    var 前缀 = prefix || "cl_handle_data_";
    
    for (var key in obj) {
        var elements = $cq("." + 前缀 + key);
        var value = obj[key];
        
        elements.each(function() {
            var elem = $cq(this);
            
            // 根据元素类型和属性应用不同的赋值逻辑
            if (elem.tagName === "INPUT") {
                var type = elem.prop("type");
                if (type === "checkbox" || type === "radio") {
                    elem.prop("checked", elem.prop("value") === value);
                } else {
                    elem.val(value);
                }
            } else if (elem.tagName === "SELECT") {
                elem.val(value);
            } else if (elem.tagName === "IMG") {
                elem.prop("src", value);
            } else if (elem.tagName === "A") {
                elem.prop("href", value.url);
                elem.text(value.text);
            } else {
                elem.text(value);
            }
        });
    }
};</code></pre>
        </section>
    </div>
</body>
</html>
